<template>
	<view>
		<nav-custom :name="title"></nav-custom>
		<view class="list" v-if="info">
			<view class="back bor_bot">
				<view class="dis_f_sb_c bor_bot">
					<view class="black_s_28">店铺名称</view>
					<view class="list_bo">
						<u--input placeholder="请输入店铺名称" fontSize="14" border="none" v-model="info.trade_name"
							@blur="blur"></u--input>
					</view>
				</view>
				<view class="dis_f_sb_c bor_bot">
					<view class="black_s_28">联系电话</view>
					<view class="list_bo">
						<u--input placeholder="请输入联系电话" fontSize="14" border="none" v-model="info.phone"
							@blur="blur1"></u--input>
					</view>
				</view>
				<view class="dis_f_sb_c bor_bot">
					<view class="black_s_28">入驻类型</view>
					<view class="list_bo dis_f_r_c" >
						<u--input placeholder="请输入入驻类型" disabled fontSize="14" border="none" v-model="info.join_type_id"
							@blur="blur2"></u--input>
						<image class="r_img" :src="url+'/image/right.png'" mode=""></image>
					</view>
				</view>
				<view class="dis_f_sb_c">
					<view class="black_s_28">店铺地址</view>
					<view class="list_bo dis_f_r_c">
						<u--input placeholder="请输入店铺地址" fontSize="14" border="none" v-model="info.address"
							@blur="blur3"></u--input>
						<u-icon name="map" color="#999CA3" size="18"></u-icon>
					</view>
				</view>
			</view>
			<view class="back dis_f_sb_t">
				<view class="black_s_28">店铺头像</view>
				<view class="list_b">
					<view class="" @click="chooseImg">
						<image class="image" :src="info.avatar" mode=""></image>
					</view>
					<!-- <view class="b_add_img" v-if="!is_show">
						<image class="b_img" :src="Urlimg" mode=""></image>
						<view class="shanchu" @click="delet()">
							<image class="delet" src="../../static/image/shanchu.png" mode=""></image>
						</view>
					</view> -->
					<view class="grey_f_20">建议上传尺寸为1:1的图片</view>
				</view>
			</view>
		</view>
		<view class="bule_back_but white_f_32 bot_wz" @click="submit()">
			保存
		</view>
		<!-- <image class="bo_js_img" src="../../static/image/zcxian.png" mode=""></image> -->
		<!-- <view>
			<u-picker :show="show" closeOnClickOverlay :columns="columns" @confirm="confirm" @cancel = "cancel"></u-picker>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "店铺设置",
				is_show: true,
				Urlimg: '',
				show: false,
				// columns: [
				// 	['加盟商家', '加盟商家', '加盟商家']
				// ],
				info:[],
				url:''

			}
		},
		onLoad() {
			this.url=this.$.ajax_url3
			this.get_info()
		},
		methods: {
			submit(){
				if(this.info.trade_name == ''){
					return this.$.ti_shi('请输入店铺名称')
				}
				if(this.info.phone == ''){
					return this.$.ti_shi('请输入联系电话')
				}
				if(this.info.address == ''){
					return this.$.ti_shi('请输入店铺地址')
				}
				this.$.ajax(1,'post','store/store/store_settings',{
					type:2,
					trade_name:this.info.trade_name,
					avatar:this.info.avatar,
					phone:this.info.phone,
					address:this.info.address,
					join_type_id:this.info.join_type_id,
				},(res)=>{
					this.$.ti_shi(res.msg)
					if(res.code == 200){
						setTimeout(()=>{
							this.$.back()
						},600)
					}
				});
			},
			get_info(){
				this.$.ajax(1,'post','store/store/store_information',{},(res)=>{
					if(res.code == 200){
						this.info = res.data
					}else{
						this.$.ti_shi(res.msg)
					}
				});
			},
			blur(e) {
				// console.log('change', e);
			},
			blur1(e) {
				// console.log('change', e);
			},
			blur2(e) {
				// console.log('change', e);
			},
			blur3(e) {
				// console.log('change', e);
			},
			chooseImg() {
				this.$.add_img(1,(res)=>{
					if(res.code == 1){
						this.info.avatar = res.data.fullurl
					}else{
						this.$.ti_shi('上传失败')
					}
				})
			},
			delet() {
				this.Urlimg = ''
				this.is_show = true
			},
			confirm(n){
				console.log(n);
				this.value2 = n.value
				this.show = false
			},
			cancel(){
				this.show = false
			}
		}
	}
</script>

<style>
	.list {
		margin-top: 200rpx;
		padding: 0 32rpx;
	}

	.list_bo {
		width: 478rpx;
		border-bottom: 2rpx solid #F7FAFF;
		padding-bottom: 10rpx;
		margin-top: 14rpx;
	}

	.bor_bot {
		margin-bottom: 40rpx;
	}

	.r_img {
		width: 32rpx;
		height: 32rpx;
	}

	.list_b {
		/* margin-left: 48rpx; */
		width: 478rpx;
	}

	.b_add {
		width: 60rpx;
		height: 60rpx;
		border-radius: 16rpx;
		border: 2rpx solid #999CA3;
		padding: 40rpx;
		margin-bottom: 16rpx;
	}

	.b_add_img {
		position: relative;
		width: 140rpx;
		height: 140rpx;
		margin-bottom: 16rpx;
	}

	.shanchu {

		position: absolute;
		top: -16rpx;
		right: -16rpx;
	}

	.b_img {
		width: 140rpx;
		height: 140rpx;
		border-radius: 16rpx;
		/* margin-bottom: 16rpx; */
	}

	.delet {
		width: 32rpx;
		height: 32rpx;
	}

	.image {
		width: 140rpx;
		height: 140rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
</style>